<template>
	<view class="page-select-manager">
		<view class="hader-search-box">
			<input class="uni-input" placeholder-class="my-place"
			    confirm-type="search"  v-model="contClass" placeholder="输入姓名搜索" />
			<icon type="search" class="seatch-icon" size="18"/>
		</view>
		<!-- <view class="empty-box"></view> -->
		<view class="scroll-box-view">
			<scroll-view  class="scrool-srool" scroll-y="true" scroll-with-animation="true"  :scroll-top="1">
				<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
					<text>无结果</text>
				</view>
				<checkbox-group  class="block" @change="changeCheckbox">
					<view class="module-flex" v-for="(item,index) in  dataSource" :key="index">
						<checkbox :value="String(item._id)" :checked="allCheckedArr.includes(String(item._id))" :class="{'checked':allCheckedArr.includes(String(item._id))}"></checkbox>
						<text @click="clickName(item._id)">{{ item.username}}</text> 
					</view>
				</checkbox-group>
			</scroll-view>
		</view>
		<view class="bottom-div-bottom">
			<view @tap="cancelHander" class="cancel-btn">取消</view>
			<view @tap="okHander" class="ok-btn">确定 （已选{{allCheckedArr.length}}人）</view>
		</view>
	</view>
</template>


<script>
	export default{
		data(){
			return{
				allDataSource:[],
				current: 0,
				checkedArr:[],
				allCheckedArr:[],
				contClass:'',
				type:0  //0：申请人,1：审批人
			}
		},
		onLoad(e){
			this.allCheckedArr = JSON.parse(decodeURIComponent(e.selIdList))
			this.type = e.type
		},
		onReady() {
			this.getPerson()
		},
		computed:{
			dataSource() {
				return this.allDataSource.filter((item) => {
					return item['username'].indexOf(this.contClass) > -1
				})
			},
			filterCandidatesLength() {
				return this.dataSource.length
			}
		},
		methods:{
		
			//点击文字 进行选择or取消
			clickName(id){
				let i=this.allCheckedArr.indexOf(id)
				if(i!=-1) this.allCheckedArr.splice(i,1)
				else this.allCheckedArr.push(id)
			},
			getPerson(){
				this.request('business/person/getSelectPersonData').then(res => {
					console.log(res)
					if(res.code==0){
						this.allDataSource=res.data
					}else{
						uni.showModal({
							showCancel: false,
							content: res.msg
						})
					}
				})
			},
			
			//要保留筛选前的选择
			changeCheckbox(e){
				console.log(e);
				this.checkedArr = e.detail.value;
				if(this.allDataSource.length !== this.dataSource.length){
					let aList = [...this.allCheckedArr]
					this.dataSource.forEach(ele => {
						let i = aList.indexOf(ele._id)
						if(i != -1){
							aList.splice(i,1);
						} 
					})
					aList.push(...this.checkedArr)
					this.allCheckedArr = aList
				}else{
					this.allCheckedArr = this.checkedArr
				}
			},
			// 取消
			cancelHander(){
				uni.navigateBack(1)
			},
			//确认
			okHander(){
				let nameList=[]
				if(this.allCheckedArr.length==0){
					uni.showModal({
						showCancel: false,
						content: '请至少选择一位员工'
					})
					return
				}
				if(this.type==1&&this.allCheckedArr.length>1){
					uni.showModal({
						showCancel: false,
						content: '审批人只能选择一位'
					})
					return
				}
				this.allDataSource.forEach(ele => {
					if(this.allCheckedArr.indexOf(ele._id)!=-1){
						nameList.push(ele.username)
					}
				})
				uni.$emit('selPersonResult',this.allCheckedArr,nameList,this.type)
				uni.navigateBack(1)
			},
		}
	}
</script>


<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
/* #ifdef H5 */
uni-checkbox .uni-checkbox-input {
  border-radius: 50% !important;
  color: #ffffff !important;
}

uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  border: none !important;
  background: #3d7eff;
	border-color: #3d7eff;
}

uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
	width: 20rpx;
	height: 20rpx;
	line-height: 20rpx;
	text-align: center;
	font-size: 18rpx;
	color: #fff;
	background: transparent;
	transform: translate(-70%, -50%) scale(1);
	-webkit-transform: translate(-70%, -50%) scale(1);
}

/* #endif */
/* 微信样式 */
/* #ifdef APP-PLUS ||MP-WEIXIN */
checkbox .wx-checkbox-input {
  border-radius: 50% !important;
  color: #ffffff !important;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  color: #fff;
  background: #3d7eff;
}

.wx-checkbox-input.wx-checkbox-input-checked {
  border-color: #3d7eff !important;
}

/* #endif */
</style>
<style lang="scss" scoped>
	/* #ifdef H5 */
	/deep/ .uni-scroll-view {
		height: calc(100vh - 160rpx);
	}
	/* #endif */
	.page-select-manager{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	.hader-search-box{
		height: 156rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		padding-left: 32rpx;
		.uni-input{
			width: 686rpx;
			height: 64rpx;
			background: #ededef;
			border-radius: 32rpx;
			padding-left: 83rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			position: relative;
		}
		/deep/ .my-place{
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #949aa0;
		}
		.seatch-icon{
			position: absolute;
			left: 80rpx;
			top: 80rpx;
			transform: translate(-50%, -50%);
		}
	}
	.empty-box{
		background-color: #F7F7F7;
		height: 16rpx;
	}
	.scroll-box-view{
		flex: 1;
		position: relative;
		.scrool-srool{
			margin-bottom: 152rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			.uni-combox__selector-empty{
				margin-top: 10px;
				text-align: center;
				display: block;
			}
			.module-flex{
				background: #fff;
				display: flex;
				height: 70rpx;
				line-height: 70rpx;
				padding-right: 32rpx;
			    padding-left: 32rpx;
			}
		}
	}
	.bottom-div-bottom{
		width: 100%;
		height: 152rpx;
		background: #ffffff;
		align-items: center;
		display: flex;
		padding-left: 32rpx;
		padding-right: 32rpx;
		justify-content: space-between;
		box-shadow: 0px -2px 20px 0px rgba(0,0,0,0.05); 
		position: fixed;
		bottom: 0;
		.cancel-btn{
			width: 216rpx;
			height: 88rpx;
			background:rgba(0,122,255,0.1);
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			text-align: center;
			color: #007aff;
			line-height: 88rpx;
			vertical-align: middle;
		}
		.ok-btn{
			width: 450rpx;
			height: 88rpx;
			background: #007aff;
			border-radius: 44px;
	       
			font-size: 32rpx;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			text-align: center;
			line-height: 88rpx;
			vertical-align: middle;
			color: #ffffff;
		}
	}
</style>
